<template>
	<view class="container">
		<view class="title">你的昵称、生日和身高是?</view>
		<view class="payatton">希望大家如何称呼及了解你</view>
		<view class="container-input">
			<view class="container-input-left">昵称</view>
			<view class="container-input-border"></view>
			<input class="container-input-input" v-model="user_nickname" type="text" placeholder="请输入您的昵称" />
		</view>
		<view class="container-input">
			<view class="container-input-left">星座</view>
			<view class="container-input-border"></view>
			<uni-data-select v-model="zodiacValue" :localdata="range" @change="change"></uni-data-select>
		</view>
		<view class="container-title">
			— 选择生日 —
		</view>
		<picker-view :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
		<view class="container-title">
			— 选择身高 —
		</view>
		<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindWeightChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in heightList" :key="index">{{item}}cm</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in weightList" :key="index">{{item}}kg</view>
			</picker-view-column>
		</picker-view>
		<view class="btns" @click="submit">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				months,
				days,
				pickerValue: [years.length - 1, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				heightList: [155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172,
					173, 174, 175, 176, 177, 178, 179, 180
				], //身高
				weightList: [50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69], //体重
				birthday: '', //选择的生日
				weightValue: '', //体重
				heightValue: '', //身高
				zodiacValue: '', //星座
				range: [{
						value: 0,
						text: "水平座"
					},
					{
						value: 1,
						text: "双鱼座"
					},
					{
						value: 2,
						text: "白羊座"
					},
					{
						value: 3,
						text: "金牛座"
					},
					{
						value: 4,
						text: "双子座"
					},
					{
						value: 5,
						text: "巨蟹座"
					},
					{
						value:6,
						text: "狮子座"
					},
					{
						value: 7,
						text: "处女座"
					},
					{
						value: 8,
						text: "天秤座"
					},
					{
						value: 9,
						text: "天蝎座"
					},
					{
						value: 10,
						text: "射手座"
					},
					{
						value: 11,
						text: "摩羯座"
					},
				],
				gender:1,//性别
				user_nickname:'',//昵称
				value: [],
				horoscope:'',//星座
			}
		},
		onLoad(options) {
			this.gender = options.gender
		},
		methods: {
			//星座选择
			change(e) {
				this.horoscope = this.range[e].text;
			},
			// 时间选择
			bindChange: function(e) {
				const val = e.detail.value;
				this.birthday = this.years[val[0]] + '-' + this.months[val[1]] + '-' + this.days[val[2]];

			},
			// 体重
			bindWeightChange: function(e) {
				this.heightValue = this.heightList[e.detail.value[0]]
				this.weightValue = this.weightList[e.detail.value[1]]
			},
			// 提交
			submit() {
				if(!this.user_nickname) return this.$helper.toast('none', '请输入昵称')
				console.log(this.gender,this.user_nickname,this.birthday, this.heightValue, this.weightValue, 333)
				let infoData = {
					user_nickname:this.user_nickname,
					gender:this.gender,
					birthday:this.birthday,
					stature:this.heightValue,
					weight:this.weightValue,
					horoscope:this.horoscope
				}
				this.$helper.to('/pages/views/uploadAvart/uploadAvart?infoData='+JSON.stringify(infoData))
			},
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #fff;
	}

	::v-deep .uni-select__selector {
		z-index: 999;
	}

	.picker-view {
		// width: 750rpx !important;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 80rpx;
		text-align: center;
	}

	.container {
		padding: 25rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;

		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #000000;
			line-height: 67rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.payatton {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 39rpx;
			text-align: left;
			margin-top: 20rpx;
		}
	}

	.container-input {
		display: flex;
		justify-content: space-between;
		width: 590rpx;
		height: 90rpx;
		margin: 50rpx auto;
		background-color: #F8F8F8;

		.container-input-left {
			width: 18%;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 33rpx;
			font-style: normal;
			line-height: 90rpx;
			text-align: center;
		}

		.container-input-border {
			width: 2rpx;
			height: 32rpx;
			background-color: #ccc;
			margin-top: 30rpx;
		}

		.container-input-input {
			width: 70%;
			height: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
		}
	}

	.container-title {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}

	.btns {
		width: 630rpx;
		height: 90rpx;
		background: rgba(51, 51, 51, 0.8);
		border-radius: 49rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		margin-top: 50rpx;
	}
</style>